$vt-c-white: #ffffff;
$vt-c-white-soft: #f8f8f8;
$vt-c-white-mute: #f2f2f2;

$vt-c-black: #181818;
$vt-c-black-soft: #222222;
$vt-c-black-mute: #282828;

$vt-c-indigo: #2c3e50;

$vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
$vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
$vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
$vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

$vt-c-text-light-1: $vt-c-indigo;
$vt-c-text-light-2: rgba(60, 60, 60, 0.66);
$vt-c-text-dark-1: $vt-c-white;
$vt-c-text-dark-2: rgba(235, 235, 235, 0.64);

$color-background: $vt-c-white;
$color-background-soft: $vt-c-white-soft;
$color-background-mute: $vt-c-white-mute;

$color-border: $vt-c-divider-light-2;
$color-border-hover: $vt-c-divider-light-1;

$color-heading: $vt-c-text-light-1;
$color-text: $vt-c-text-light-1;

$section-gap: 160px;

@media (prefers-color-scheme: dark) {
    $color-background: $vt-c-black;
    $color-background-soft: $vt-c-black-soft;
    $color-background-mute: $vt-c-black-mute;

    $color-border: $vt-c-divider-dark-2;
    $color-border-hover: $vt-c-divider-dark-1;

    $color-heading: $vt-c-text-dark-1;
    $color-text: $vt-c-text-dark-2;
}